Select = {
    props = {
        _selected = 1
    }
}
ObjectPool.option = ObjectPool.new(function ()
    return Node.Label()
end)

SelectEvent = RegisterEvents{
    "SelectOption"
}

function Select:ctor(options)
    self.options = options
    self:onClick(self.showSelections, self)
end

function Select:showSelections()
    self:checkUpdateTransform()
    local x = self.wx - self.ax * self.width * self.sx
    local y = self.wy + (1 - self.ay) * self.height * self.sy
    DropDownList.default:show(self.options, x, y)
    DropDownList.default:once(DropDownEvent.OnSelected, self.onSelected, self)
end

function Select:onSelected(idx)
    self.options[self._selected].selected = false
    self._selected = idx
    self.options[idx].selected = true
    self:emit(SelectEvent.SelectOption, idx, self.options[idx])
end

local function onSelectOption(self, idx, option)
    self.string = option.text
end

function Node.Select(options)
    local node = Node.Scale9("roundedBorderBox48")
    options[1].selected = true
    node:addComponent(Select, options)

    local label = Node.Label(options[1].text)
    node:add(label)
    label:addComponent(Align):axy(0, 0.5)
    label.alignPercentX = 0
    label.alignOffsetX = 10
    node:on(SelectEvent.SelectOption, onSelectOption, label)

    local arrow = Node.Sprite("arrow"):addTo(node)
    arrow.interactable = false
    arrow.name = "arrow"
    arrow:setNativeSize()
    arrow.ax = 1
    arrow:addComponent(Align)
    arrow.alignPercentX = 1
    arrow.alignOffsetX = -10

    node.height = 30


    return node
end